<template>
  <div class="app-container merchantBox">
    <el-button type="primary" class="addUser" @click="handAddJump">添加节点</el-button>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border>
      <el-table-column align="center" label="节点ID" width="150">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="节点链接" width="1000" align="center">
        <template slot-scope="scope">{{ scope.row.url }}</template>
      </el-table-column>
      <el-table-column align="center" prop="create_time" label="操作" width="150">
        <template slot-scope="scope">
          <div class="optionAll">
            <el-button size="mini" @click="handEditJump(scope.row.id)">编辑</el-button>
            <el-button size="mini" @click="deleteFn(scope.row.id)" type="danger">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="pageBox"
      background
      layout="prev, pager, next"
      :total="pageTotal"
      :page-size="20"
      v-if="pageShow"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      list: null,
      listLoading: false,
      pageTotal: 0,
      pageShow: false
    };
  },
  created() {},

  methods: {
    // 数据初始化
    defaultFn(currentPage) {
      this.listLoading = true;
      this.$http
        .get("/web/user/url/list", {
			params: {
				token: localStorage.getItem("user_token"),
				pageSize: 20,
				page: currentPage
			}
        })
        .then(response => {
			if (response.status == 200) {
				this.list = response.data.data;
				// this.pageTotal = response.data.data.pagination.total;
				// if (this.pageTotal > 20) {
				// this.pageShow = true;
				// } else {
				// this.pageShow = false;
				// }

				this.listLoading = false;
			} else {
				this.listLoading = false;
			}
        })
        .catch(error => {
          console.log(error);
        });
    },
    handAddJump(id) {
      	this.$router.push({ name: "nodeAdd" });
    },
    handEditJump(id) {
      	this.$router.push({ name: "nodeUpdate", query: { id: id } });
    },
    // 触发分页
    handleCurrentChange(val) {
      	this.defaultFn(val);
    },
    //删除
    deleteFn(id) {
      this.$confirm("确认删除?", "是否删除该节点?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .post("/web/user/url/delete", {
              token: localStorage.getItem("user_token"),
              id: id
            })
            .then(response => {
              if (response.data.status == "success") {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.defaultFn();
              }
            })
            .catch(error => {
              console.log("error:", error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //禁用
    disableFn(value) {
      this.$confirm(
        value.status == 0 ? "禁用?" : "恢复?",
        value.status == 0 ? "是否禁用该用户?" : "是否恢复该用户?",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.$http
            .post("/web/user/update", {
              token: localStorage.getItem("user_token"),
              status: value.status == 0 ? 1 : 0,
              id: value.id
            })
            .then(response => {
              if (response.data.status == "success") {
                this.$message({
                  type: "success",
                  message: "操作成功!"
                });
                this.defaultFn();
              }
            })
            .catch(error => {
              console.log("error:", error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    }
  },

  mounted() {
    this.defaultFn();
  }
};
</script>

<style scoped lang='scss'>
.merchantBox {
  width: 1341px;
  margin: 40px;
  .addUser {
    margin-bottom: 20px;
  }
  .optionAll {
    display: flex;
    justify-content: space-between;
  }
}
.pageBox {
  text-align: center;
  margin-top: 30px;
}
</style>
